<template>
    <div class="student-container">

        <!-- 搜索 -->
        <el-form :inline="true" class="demo-form-inline">
            <!-- 搜索姓名或手机号 -->
            <el-form-item>
                <el-input placeholder="姓名或手机号" v-model="searchKey" />
            </el-form-item>

            <!-- 状态搜索 -->
            <el-form-item>
                <el-select v-model="selectValue" placeholder="状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <!-- 日期搜索 -->
            <el-form-item>
                <el-date-picker @change="fn1" value-format="x" v-model="timeValue" type="daterange" start-placeholder="开始日期"
                    end-placeholder="结束日期" :default-time="defaultTime" style="width: 230px" range-separator="--" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toSearch">
                    <el-icon style="font-weight:bolder; margin-right: 5px">
                        <Search />
                    </el-icon>
                    搜索
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="margin-left: 350px;" @click="toAdd">
                    <el-icon style="font-weight:bolder; ">
                        <Plus />
                    </el-icon>
                    添加
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 教师数据表格 -->
        <el-table :data="tableDataFilter?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="true"
            style="width: 100%" class="teacher-data" :table-layout="tableLayout" :header-cell-style="{
                background: '#ecf7ff',
                color: '#666666',
                fontWeight: '600',
                fontSize: '16px',
            }" :cell-style="cellStyle" :show-overflow-tooltip="true">
            >
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="number" label="编号" />
            <el-table-column prop="statu" label="状态">
                <template #default="{ row }">
                    <el-tag type="warning" v-if="row.statu == false">停用</el-tag>
                    <el-tag type="success" v-else-if="row.statu == true">启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="telephone" label="手机号" />
            <el-table-column prop="introduction" label="简介">
                <template #default="scope">
                    <!-- //content绑定的是单元格中对应的值 (表格内容超出省略)-->
                    <el-tooltip :content="scope.row.introduction" raw-content placement="top-start"
                        v-if="scope.row.introduction">
                        <!-- //判断单元格中有值，并且值的长度小于等于8，显示单元格中的值 -->
                        <span v-if="scope.row.introduction && scope.row.introduction.length <= 8">
                            {{ scope.row.introduction }}
                        </span>
                        <!-- //如果单元格中有值，并且值得长度大于8，便使用substr截取0-15的内容显示，后面的变成省略号 -->
                        <span v-if="scope.row.introduction && scope.row.introduction.length > 8">
                            {{ scope.row.introduction.substr(0, 8) + "..." }}
                        </span>
                    </el-tooltip>
                    <span v-else-if="scope.row.introduction == null"> NA </span>
                </template>
            </el-table-column>
            <el-table-column prop="grade" label="年级" />
            <el-table-column prop="subject" label="科目" />
            <el-table-column prop="commission" label="佣金比" />
            <el-table-column prop="salary" label="总收入" />
            <el-table-column prop="student" label="学生数" />
            <el-table-column prop="createTime" label="创建时间">
                <template #default="{ row }">
                    <span>{{ dayjs.unix(row.createTime).format('YYYY-MM-DD') }}</span>
                </template>
            </el-table-column>
            <!-- 自定义删除按钮 -->
            <el-table-column prop="operation" label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Delete" circle
                        @click="handleDelete(scope.row.id)"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
            :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            class="pagination-box" />

    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { Search, Delete, Plus } from '@element-plus/icons-vue';
import { getTeacher } from '../../../api/user';
import {useRouter} from "vue-router"
import dayjs from 'dayjs';
import { deleteItems } from '../../../api/deleteData';

const searchKey = ref(null)
const maxTime = ref(null)
const minTime = ref(null)
const router =useRouter()

// 日期选择
const timeValue = ref('')
// 状态选择
const selectValue = ref('all')
// 表格列自适应  
const tableLayout = ref('auto')
const currentPage = ref(1)
const pageSize = ref(10)
const tableDataFilter = ref([])

// 获取时间选择器选择的值
const fn1 = (timer) => {
    minTime.value = timer[0] / 1000
    maxTime.value = timer[1] / 1000
}

// 状态选择
const options = [
    {
        value: 'all',
        label: '全部',
    },
    {
        value: true,
        label: '启用',
    },
    {
        value: false,
        label: '停用',
    },
]

// 默认日期
const defaultTime = [
    new Date(2000, 1, 1, 12, 0, 0),
    new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'

// 表格表头
const tableData = ref([])

// 蓝色字体
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.label === '状态' || column.label === '佣金比' || column.label === '总收入' || column.label === '学生数') {
        return {
            color: '#1485fe'
        }
    }
}

const total = computed(() => {
    return tableDataFilter.value?.length
})

const handleSizeChange = (val) => {
    pageSize.value = val
}
const handleCurrentChange = (val) => {
    currentPage.value = val
}

const fetchData = async () => {
    tableData.value = await getTeacher()
    tableDataFilter.value = tableData.value
}


const toAdd = () => {
    router.push("/user/teacheraddteacher")
}

// 搜索事件
const toSearch = () => {
    console.log(searchKey.value, selectValue.value, minTime.value);
    if (!searchKey.value && selectValue.value == "all" && !minTime.value) {
        tableDataFilter.value = tableData.value
        return
    }

    console.log(selectValue.value);
    tableDataFilter.value = tableData.value.filter((item) => {
        return (searchKey.value ? (item.name.includes(searchKey.value) || item.telephone.includes(searchKey.value)) : "false") && (selectValue.value != "all" ? (item.statu == selectValue.value) : "false")
    })
}

// 删除单条数据
const handleDelete = async (index) => {
    // 远程删除
    await deleteItems("teacher", `${index}`)
    // 本地删除
    tableDataFilter.value = tableDataFilter.value.filter((item) => item.id != index)
    tableData.value = tableData.value.filter((item) => item.id != index)
}

onMounted(() => {
    fetchData()
})

</script>

<style lang="scss" scoped>
.demo-form-inline {
    display: flex;
}

:deep(.el-input) {
    width: 150px;
}

.student-container {
    // min-height: 600px;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.teacher-data {
    width: 100%;
    height: 100%;
}

:deep(.el-table .el-table__cell) {
    text-align: center;
}

:deep(.text-color) {
    color: blue
}

.pagination-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>